import { Button, Card, Flex, Tag, SwipeAction } from "@/components/base";
import { Typography } from "@/components/typography";
import Icon from "@ant-design/icons";
import I007 from '../../icons/I007.svg?react';
import { toCurrency } from "@/utils/funs";

const { Text } = Typography;

/** 团购卷 */
export function GroupPurchaseCoupons() {
    return (
        <Card style={{ width: '100%' }}>
            <Flex justify="space-between">
                <Text size={16} strong style={{ display: 'block', marginBottom: '16px', color: '#6e11b0' }}>
                    <Icon component={I007} style={{ marginRight: 6 }} />
                    优惠卷
                </Text>
                <Button size="small">增加</Button>
            </Flex>
            <Flex vertical gap={16}>
                <GroupPurchaseCouponCard />
                <GroupPurchaseCouponCard />
            </Flex>
            <Flex justify='space-between' style={{ marginTop: 16 }}>
                <Text size={12} style={{ color: '#6e11b0' }} >合计：{toCurrency(200)}</Text>
            </Flex>
        </Card>
    )
}

/** 团购卷卡片 */
function GroupPurchaseCouponCard() {
    return (
        <SwipeAction
            style={{ width: '100%' }}
            rightActions={[
                { text: '删除', key: 'delete', color: 'red' }
            ]}
        >
            <Flex vertical>
                <Flex align='center' gap={8} style={{ width: '100%', marginBottom: 6 }}>
                    <Text size={14} style={{ color: '#6e11b0' }} >团购卷名称</Text>
                    <Tag fill="outline">美团</Tag>
                </Flex>
                <Text size={12} style={{ color: '#9810fa' }}>卡卷号: 12345567890</Text>
                <Flex justify='space-between' gap={16}>
                    <Flex gap={8} align='center'>
                        <Text size={12} style={{ color: '#9810fa' }}>优惠金额: {toCurrency(100)}</Text>
                    </Flex>
                    <Flex gap={8} align='center'>
                        <Text size={12} style={{ color: '#9810fa' }}>卡卷金额: {toCurrency(100)}</Text>
                    </Flex>
                </Flex>
            </Flex>
        </SwipeAction>
    )
}
